<template>
	<view class="container">
		<!-- 電子票卷 -->
		<view class="nav">
			<view class="nav_list" :class="{active:status==0}" @tap="setStatus" data-status="0">未使用</view>
			<view class="nav_list" :class="{active:status==1}" @tap="setStatus" data-status="1">已使用</view>
			<view class="nav_list" :class="{active:status==2}" @tap="setStatus" data-status="2">已過期</view>
		</view>

		<view class="discount_coupon">
			<scroll-view v-if="ticketList.length" scroll-y="true" class="scroll_y" @scrolltolower="scroll">
				<view class="list"
					:style="{backgroundColor:item.is_order === 1 && item.remaining_times > 0?'#39B19D':'#ccc'}"
					v-for="item in ticketList" :key="item.id" @tap="select_box(item)">
					<view class="list_left">
						<view class="top" :class="{isUse:item.is_order !== 1 || item.remaining_times <= 0}">
							<view class="coupon">{{item.title}}</view>
							<view class="condition">可用 <text
									:style="{color:item.remaining_times > 0 ? '#FF6600' : '#ccc' }">{{item.remaining_times}}</text>
								次</view>
						</view>
						<view class="bottom">
							<view class="number">${{Number(item.money)}}</view>
							<view class="time">
								<view style="text-align: end;margin-bottom: 10rpx;" class="">{{item.store_name}}</view>
								<view class="">有效期至{{effectiveTime(item.expire_time*1000)}}</view>
							</view>
						</view>
						<view class="status">
							<view class="s_item">
								預約：<text
									:style="{color:item.is_order == 1 ? '#FF6600' : '#ccc' }">{{item.is_order == 1 ? '可用' : '不可用'}}</text>
							</view>
							<view class="s_item">
								續單：<text
									:style="{color:item.is_continuation_order == 1 ? '#FF6600' : '#ccc' }">{{item.is_continuation_order == 1 ? '可用' : '不可用'}}</text>
							</view>
						</view>
					</view>
					<view class="list_right">
						<view v-if="item.is_order === 1 && item.remaining_times > 0">去使用</view>
						<view v-else>不可用</view>
					</view>
				</view>
				<view v-if="!flag" style="margin: 30rpx;text-align: center;">到底啦~</view>
			</scroll-view>
			<view v-else style="text-align: center;">暫無數據</view>
		</view>

	</view>
</template>

<script>
	import {
		getCouponTicketCard
	} from '@/api/me.js'

	export default {
		data() {
			return {
				status: 0,
				page: 1,
				type: 2, // 1--優惠卷   2--電子票卷   3--儲值卡
				ticketList: [],
				flag: true
			};
		},
		methods: {
			setStatus: function(e) {
				// console.log(e.currentTarget.dataset.status)
				var status = e.currentTarget.dataset.status
				if (this.status != status) {
					this.status = status
				}
			},
			scroll() {
				if (this.flag) {
					getCouponTicketCard({
						type: this.type,
						status: this.status,
						page: ++this.page
					}).then(res => {
						// console.log(res.data, "電子票卷")
						if (res.data.length) {
							this.ticketList = this.ticketList.concat(res.data)
						} else {
							this.flag = false
						}

					})
				}
			},
			effectiveTime(num) {
				let time = new Date(num)
				let y = time.getFullYear()
				let m = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1)
				let d = time.getDate() >= 10 ? time.getDate() : "0" + (time.getDate())
				return y + "/" + m + "/" + d
			},
			select_box(item) {
				// console.log(item)
				this.$store.commit('updateTicketInfo', item)
				if (item.is_order === 1 && item.remaining_times > 0) {
					uni.navigateTo({
						url: `/pages/electronic_ticket_roll/ticket_roll_select_box/ticket_roll_select_box`
					})
				} else {
					uni.showToast({
						title: '該卡券不可使用',
						icon: 'none'
					})
				}

			}
		},
		watch: {
			status(n) {
				// getCouponTicketCard()
				getCouponTicketCard({
					type: this.type,
					status: n,
					page: 1
				}).then(res => {
					// console.log(res.data, "電子票卷")
					this.ticketList = res.data
				})
			}
		},
		onShow() {
			getCouponTicketCard({
				type: this.type,
				status: this.status,
				page: this.page
			}).then(res => {
				console.log(res.data, "電子票卷")
				this.ticketList = res.data
			})
		}
	}
</script>

<style lang="less">
	.container {
		padding: 15rpx 30rpx;
		box-sizing: border-box;
		height: calc(100vh - 90rpx);
		background: #F3F5F9;

		.nav {
			padding: 30rpx 37rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.nav_list {
				font-size: 28rpx;
				color: #000;
				font-weight: 400;
			}

			.active {
				position: relative;
				font-weight: bold;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0%;
					bottom: 0%;
					width: 100%;
					height: 10rpx;
					background: #39B19D;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					opacity: 0.7;
					margin-top: 5rpx;
				}
			}
		}

		.discount_coupon {
			width: 100%;

			.list {
				// height: 154rpx;
				width: 100%;
				background-color: #39B19D;
				border-radius: 16rpx;
				border: 1rpx solid #F3F5F9;
				display: flex;
				margin-bottom: 30rpx;

				.list_left {
					width: 90%;
					height: 100%;
					background: #fff;
					border-radius: 16rpx;

					.top {
						height: 62rpx;
						border-bottom: 1rpx dashed #999;
						// padding-top: 15rpx;
						// box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						.coupon {
							font-size: 23rpx;
							font-weight: bold;
							margin-left: 44rpx;
							position: relative;

							&:before {
								content: '';
								display: block;
								width: 5rpx;
								height: 18rpx;
								background: linear-gradient(180deg, #00BC64 0%, #39B19D 100%);
								border-radius: 2rpx 2rpx 2rpx 2rpx;
								opacity: 1;
								position: absolute;
								left: -20rpx;
								top: 0;
								margin-top: 9rpx;
							}
						}

						.condition {
							font-size: 22rpx;
							color: #999;
							margin-right: 60rpx;
						}

						&:before {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #F3F5F9;
							display: block;
							position: absolute;
							left: 0%;
							bottom: 0%;
							margin-left: -10rpx;
							margin-bottom: -10rpx;
						}

						&::after {
							content: "";
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #39B19D;
							display: block;
							position: absolute;
							right: 0%;
							bottom: 0%;
							margin-right: -10rpx;
							margin-bottom: -10rpx;
						}
					}

					.isUse::after {
						content: "";
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #ccc;
						display: block;
						position: absolute;
						right: 0%;
						bottom: 0%;
						margin-right: -10rpx;
						margin-bottom: -10rpx;
					}

					.bottom {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						.number {
							margin: 20rpx 0 0 34rpx;
							font-size: 38rpx;
							color: #FF6600;
							font-weight: bold;
						}

						.time {
							font-size: 30rpx;
							color: #999;
							margin-right: 50rpx;
							display: flex;
							flex-direction: column;
						}
					}

					.status {
						display: flex;
						justify-content: space-between;
						padding: 10rpx 34rpx;
					}
				}

				.list_right {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						width: 100%;
						// 設置文本竪向排列
						writing-mode: vertical-lr;
						height: 154rpx;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 23rpx;
						// 設置文字間隔
						letter-spacing: 13rpx;
					}
				}
			}
		}

		.scroll_y {
			height: 85vh;
			// background-color: skyblue;
		}

	}
</style>